<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 200%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 34px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}/*表格*/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #555;
  color: white;
}
body {
	margin: 0;
	height: 100vh;
}/*导航*/

#app {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

#header,
#footer {
	height: 80px;
	background-color: chocolate;
}

#content {
	display: flex;
	height: calc(100% - 80px);
}
#main {
	width: 600px;
	background-color: antiquewhite;
}
}/*主体*/
</style>
</head>
<body>
	<div id="app">
		<div id="header">
<ul>
  <li><a href="1.html">即使是眼泪流干</a></li>
  <li><a href="2.html">别辜负钟爱之人</a></li>
</ul>
</div>
		<div id="content">	
			<div id="main"><table id="customers">
	<tr>
		<th>人物真相</th>
		<th>禁忌名谓</th>
		<th>神之真言</th>
		<th>源祖之地</th>
	</tr>
	<tr>
		<td><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F13124c3e23d0413f7576abea1a08f2f4ebffa5ec.jpg&refer=http%3A%2F%2Fi1.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671865197&t=a8021b77be5d3b6c69080d8c081d3500" align="bottom"width="60"height="40"/></td>
		<td>慧慧</td>
		<td>最强最具威力的魔法，爆裂魔法的使用者，吾名为慧慧</td>
		<td>为世界的美好献上祝福</td>
	</tr>
	<tr>
		<td><img src="https://img2.baidu.com/it/u=219690607,329357450&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=476" align="bottom"width="60"height="40"/></td>
		<td>昂</td>
		<td>我可是知道地狱的</td>
		<td>从零开始的异世界生活</td>
	</tr>
	<tr>
		<td><img src="https://img1.baidu.com/it/u=2869254886,3156277933&fm=253&fmt=auto&app=120&f=PNG?w=1011&h=566"width="60"height="40" align="bottom"></td>
		<td>爱</td>
		<td>我已经怒不可遏了</td>
		<td>奇蛋物语</td>
	</tr>
	<tr>
		<td><img src="https://img0.baidu.com/it/u=3698407730,2234317833&fm=253&fmt=auto&app=138&f=JPG?w=500&h=280"width="60"height="40" align="bottom"></td>
		<td>帆高</td>
		<td>比起晴天，我更需要阳菜啊</td>
		<td>天气之子</td>
	</tr>
</table></div>		
		</div>
		<div id="footer">
        <p>如果不想离开，请带她逃走，
           穿过冰霜风雪，我们终能听见花开的声音。
        </p>
        </div>
	</div>
</body>
</html>
